<!--危房整治-->
<template>
  <div id="monitor">
    <div v-if="isShow" class="title">
      <span @click="onClickLeft" style="position: absolute;left: 5px;display: flex;align-items: center;font-size: 14px;">
        <van-icon name="arrow-left" />返回
      </span>
      风险监控列表
    </div>
    <div v-if="isShow" style="height: 60vh;text-align:center;padding-top: 20vh;">
      <div style="margin-bottom: 10px;">
        <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png" />
      </div>
      <div>暂无数据</div>
    </div>
    <div v-if="!isShow" style="padding: 4px">
      <van-cell-group>
        <van-field
          right-icon="search"
          style="background: #EEEEEE;border-radius: 5px;height:40px;font-size: 0.1em;"
          v-model="value"
          placeholder="请输入信息"
        />
      </van-cell-group>
    </div>
    <div v-if="!isShow" class="content">
      <ul>
        <li v-for="(item,index) in contentData" :key="index">
          <p style="font-weight: bold;margin-bottom: 8px;">
            <span style>{{item.name}}</span>
            <span style="font-weight:800;margin-left: 70px;">{{item.name2}}</span>
            <span v-if="item.name1=='未审批'" style="float: right;color:red;font-weight:800;">{{item.name1}}</span>
            <span v-if="item.name1=='已审批'" style="float: right;color:blue;font-weight:800;">{{item.name1}}</span>
          </p>
          <p style="font-size: 14px;color: #848484;">
            <span style="float: left">{{item.BH}}</span>
            <span style="float: right">{{item.time}}</span>
          </p>
          <p style="clear: both;display: flex;align-items: center;">
            <img style="margin-right: 4px;" width="10" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/dingwei.png" />
            <span style="font-size: 0.08rem;color:blue">{{item.address}}</span>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      contentData: [
        {
          name: '王XX',
          name1: '未审批',
          name2: 'C级 修缮',
          BH: '房屋编号:4454551554115',
          time: '申请时间:2021-12-22',
          address: '杭州市临安区太湖源镇里畈村１组里畈27号'
        },
        {
          name: '王XX',
          name1: '未审批',
          name2: 'C级 腾空防控',
          BH: '房屋编号:4454551554115',
          time: '申请时间:2021-12-22',
          address: '杭州市临安区太湖源镇里畈村１组里畈27号'
        },
        {
          name: '王XX',
          name1: '未审批',
          name2: 'C级 修缮',
          BH: '房屋编号:4454551554115',
          time: '申请时间:2021-12-22',
          address: '杭州市临安区太湖源镇里畈村１组里畈27号'
        },
        {
          name: '王XX',
          name1: '未审批',
          name2: 'C级 修缮',
          BH: '房屋编号:4454551554115',
          time: '申请时间:2021-12-22',
          address: '杭州市临安区太湖源镇里畈村１组里畈27号'
        },
        {
          name: '王XX',
          name1: '未审批',
          name2: 'C级 修缮',
          BH: '房屋编号:4454551554115',
          time: '申请时间:2021-12-22',
          address: '杭州市临安区太湖源镇里畈村１组里畈27号'
        },
        {
          name: '王XX',
          name1: '未审批',
          name2: 'C级 修缮',
          BH: '房屋编号:4454551554115',
          time: '申请时间:2021-12-22',
          address: '杭州市临安区太湖源镇里畈村１组里畈27号'
        },
        {
          name: '王XX',
          name1: '未审批',
          name2: 'C级 修缮',
          BH: '房屋编号:4454551554115',
          time: '申请时间:2021-12-22',
          address: '杭州市临安区太湖源镇里畈村１组里畈27号'
        },
        {
          name: '王XX',
          name1: '已审批',
          name2: 'C级 修缮',
          BH: '房屋编号:4454551554115',
          time: '申请时间:2021-12-22',
          address: '杭州市临安区太湖源镇里畈村１组里畈27号'
        }
      ],
      value: '',
      isShow: true
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: '/FeatureList'
      })
    },
    contentClick(item) {
      this.$router.push({
        path: '/DetailPage'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#monitor {
  height: 100vh;
  //   overflow: auto;
  background: #ffffff;
  font-size: 14px;
  .title {
    width: 100%;
    height: 50px;
    background: #007aff;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    position: relative;
  }
  .content {
    height: calc(100vh - 100px);
    overflow: auto;
    padding: 10px;
    ul li {
      height: 70px;
      border-bottom: 1px solid #d2d2d2;
      margin-bottom: 10px;
    }
  }
}
</style>
